<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute } from 'vue-router'
import { Chart } from 'chart.js/auto'

// 侧边栏状态
const isSidebarOpen = ref(false)

// 最近登录时间
const lastLoginTime = ref('2023-07-15 08:30:45')

// 统计数据
const totalSales = ref(125680)
const salesGrowth = ref(12.5)
const totalOrders = ref(1568)
const orderGrowth = ref(8.2)
const totalUsers = ref(3265)
const userGrowth = ref(15.3)
const totalProducts = ref(526)
const outOfStockProducts = ref(12)

// 销售周期
const salesPeriod = ref('month')

// 最新订单
const latestOrders = ref([
  { id: 1, orderNo: 'ORD-2023071501', user: '张三', amount: 1280, status: '待发货', createTime: '2023-07-15 10:20:30' },
  { id: 2, orderNo: 'ORD-2023071502', user: '李四', amount: 850, status: '待付款', createTime: '2023-07-15 09:45:12' },
  { id: 3, orderNo: 'ORD-2023071503', user: '王五', amount: 2500, status: '已完成', createTime: '2023-07-15 08:30:45' },
  { id: 4, orderNo: 'ORD-2023071504', user: '赵六', amount: 760, status: '待收货', createTime: '2023-07-14 18:20:10' },
  { id: 5, orderNo: 'ORD-2023071505', user: '钱七', amount: 1950, status: '已取消', createTime: '2023-07-14 16:15:30' }
])

// 格式化数字
function formatNumber(num) {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
}

// 切换侧边栏
function toggleSidebar() {
  isSidebarOpen.value = !isSidebarOpen.value
}

// 初始化图表
function initCharts() {
  // 销售趋势图
  const salesCtx = document.getElementById('salesChart').getContext('2d')
  new Chart(salesCtx, {
    type: 'line',
    data: {
      labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
      datasets: [{
        label: '销售额',
        data: [12500, 15600, 14800, 16200, 18500, 21000, 22500],
        borderColor: 'rgb(59, 130, 246)',
        backgroundColor: 'rgba(59, 130, 246, 0.1)',
        tension: 0.3,
        fill: true
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: {
          display: false
        }
      },
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  })
  
  // 热门商品图表
  const productsCtx = document.getElementById('productsChart').getContext('2d')
  new Chart(productsCtx, {
    type: 'doughnut',
    data: {
      labels: ['手机', '电脑', '服装', '食品', '其他'],
      datasets: [{
        data: [35, 25, 20, 15, 5],
        backgroundColor: [
          'rgba(59, 130, 246, 0.8)',
          'rgba(16, 185, 129, 0.8)',
          'rgba(249, 115, 22, 0.8)',
          'rgba(217, 70, 239, 0.8)',
          'rgba(107, 114, 128, 0.8)'
        ]
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: {
          position: 'right'
        }
      }
    }
  })
}

onMounted(() => {
  initCharts()
})
</script>

<template>
  <div class="flex h-screen overflow-hidden">
    <!-- 侧边栏 -->
    <div :class="['bg-gray-900 text-white w-64 flex flex-col transition-all duration-300 ease-in-out', isSidebarOpen ? 'translate-x-0' : '-translate-x-64 md:translate-x-0']">
      <!-- 侧边栏头部 -->
      <div class="flex items-center justify-between px-4 py-3 bg-gray-800">
        <div class="flex items-center">
          <img alt="Logo" class="h-8 w-8 rounded-full" src="https://via.placeholder.com/40">
          <span class="ml-2 text-xl font-semibold">商城管理系统</span>
        </div>
        <button @click="toggleSidebar" class="md:hidden text-gray-300 hover:text-white">
          <i class="bi bi-x-lg"></i>
        </button>
      </div>
      
      <!-- 侧边栏菜单 -->
      <nav class="flex-1 overflow-y-auto py-4">
        <ul class="space-y-1">
          <li>
            <router-link to="/dashboard" class="flex items-center px-4 py-2 bg-gray-700 text-white">
              <i class="bi bi-speedometer2 mr-3"></i>
              <span>控制台</span>
            </router-link>
          </li>
          <li>
            <router-link to="/products" class="flex items-center px-4 py-2 text-gray-300 hover:bg-gray-700 hover:text-white">
              <i class="bi bi-box-seam mr-3"></i>
              <span>商品管理</span>
            </router-link>
          </li>
          <li>
            <router-link to="/categories" class="flex items-center px-4 py-2 text-gray-300 hover:bg-gray-700 hover:text-white">
              <i class="bi bi-tags mr-3"></i>
              <span>分类管理</span>
            </router-link>
          </li>
          <li>
            <router-link to="/orders" class="flex items-center px-4 py-2 text-gray-300 hover:bg-gray-700 hover:text-white">
              <i class="bi bi-cart3 mr-3"></i>
              <span>订单管理</span>
            </router-link>
          </li>
          <li>
            <router-link to="/inventory" class="flex items-center px-4 py-2 text-gray-300 hover:bg-gray-700 hover:text-white">
              <i class="bi bi-clipboard-data mr-3"></i>
              <span>库存管理</span>
            </router-link>
          </li>
          <li>
            <router-link to="/statistics" class="flex items-center px-4 py-2 text-gray-300 hover:bg-gray-700 hover:text-white">
              <i class="bi bi-graph-up mr-3"></i>
              <span>数据统计</span>
            </router-link>
          </li>
          <li>
            <router-link to="/settings" class="flex items-center px-4 py-2 text-gray-300 hover:bg-gray-700 hover:text-white">
              <i class="bi bi-gear mr-3"></i>
              <span>系统设置</span>
            </router-link>
          </li>
        </ul>
      </nav>
      
      <!-- 侧边栏底部 -->
      <div class="p-4 bg-gray-800">
        <div class="flex items-center">
          <img alt="用户头像" class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80">
          <div class="ml-3">
            <p class="text-sm font-medium text-white">管理员</p>
            <p class="text-xs text-gray-300">admin@example.com</p>
          </div>
        </div>
        <div class="mt-3">
          <router-link to="/login" class="flex items-center justify-center px-4 py-2 text-sm text-white bg-gray-700 rounded-md hover:bg-gray-600">
            <i class="bi bi-box-arrow-left mr-2"></i>
            退出登录
          </router-link>
        </div>
      </div>
    </div>
    
    <!-- 主内容区 -->
    <div class="flex-1 flex flex-col overflow-hidden">
      <!-- 顶部导航栏 -->
      <header class="bg-white border-b border-gray-200 shadow-sm">
        <div class="flex items-center justify-between px-4 py-3">
          <div class="flex items-center">
            <button @click="toggleSidebar" class="text-gray-500 focus:outline-none md:hidden">
              <i class="bi bi-list text-xl"></i>
            </button>
            <h1 class="ml-4 text-lg font-semibold text-gray-700">控制台</h1>
          </div>
          <div class="flex items-center space-x-4">
            <button class="text-gray-500 hover:text-gray-600 focus:outline-none relative">
              <i class="bi bi-bell"></i>
              <span class="absolute top-1 right-1 inline-block w-2 h-2 bg-red-500 rounded-full"></span>
            </button>
            <div class="flex items-center text-gray-500 hover:text-gray-600">
              <img alt="用户头像" class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80">
              <span class="ml-2 text-sm font-medium">管理员</span>
              <i class="bi bi-chevron-down ml-1"></i>
            </div>
          </div>
        </div>
      </header>
      
      <!-- 页面内容 -->
      <main class="flex-1 overflow-y-auto p-4 bg-gray-100">
        <!-- 欢迎卡片 -->
        <div class="bg-white rounded-lg shadow p-4 mb-6">
          <div class="flex items-center">
            <div class="rounded-full bg-blue-500 p-3">
              <i class="bi bi-person-check text-white text-xl"></i>
            </div>
            <div class="ml-4">
              <h2 class="text-xl font-semibold">欢迎回来，管理员</h2>
              <p class="text-gray-500">最近登录时间: {{ lastLoginTime }}</p>
            </div>
          </div>
        </div>
        
        <!-- 主要统计卡片 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
          <!-- 总销售额 -->
          <div class="bg-white rounded-lg shadow p-4">
            <div class="flex items-center justify-between mb-2">
              <h3 class="text-gray-500 text-sm font-medium">总销售额</h3>
              <span class="rounded-full bg-green-100 p-2">
                <i class="bi bi-currency-yen text-green-500"></i>
              </span>
            </div>
            <div class="flex items-baseline">
              <span class="text-2xl font-bold">¥{{ formatNumber(totalSales) }}</span>
              <span class="ml-2 text-sm text-green-500">
                <i class="bi bi-arrow-up"></i>
                {{ salesGrowth }}%
              </span>
            </div>
            <div class="text-gray-400 text-xs mt-2">
              较上月增长 {{ salesGrowth }}%
            </div>
          </div>
          
          <!-- 订单数量 -->
          <div class="bg-white rounded-lg shadow p-4">
            <div class="flex items-center justify-between mb-2">
              <h3 class="text-gray-500 text-sm font-medium">订单数量</h3>
              <span class="rounded-full bg-blue-100 p-2">
                <i class="bi bi-cart text-blue-500"></i>
              </span>
            </div>
            <div class="flex items-baseline">
              <span class="text-2xl font-bold">{{ totalOrders }}</span>
              <span class="ml-2 text-sm text-blue-500">
                <i class="bi bi-arrow-up"></i>
                {{ orderGrowth }}%
              </span>
            </div>
            <div class="text-gray-400 text-xs mt-2">
              较上月增长 {{ orderGrowth }}%
            </div>
          </div>
          
          <!-- 用户数量 -->
          <div class="bg-white rounded-lg shadow p-4">
            <div class="flex items-center justify-between mb-2">
              <h3 class="text-gray-500 text-sm font-medium">用户数量</h3>
              <span class="rounded-full bg-purple-100 p-2">
                <i class="bi bi-people text-purple-500"></i>
              </span>
            </div>
            <div class="flex items-baseline">
              <span class="text-2xl font-bold">{{ totalUsers }}</span>
              <span class="ml-2 text-sm text-purple-500">
                <i class="bi bi-arrow-up"></i>
                {{ userGrowth }}%
              </span>
            </div>
            <div class="text-gray-400 text-xs mt-2">
              较上月增长 {{ userGrowth }}%
            </div>
          </div>
          
          <!-- 商品总数 -->
          <div class="bg-white rounded-lg shadow p-4">
            <div class="flex items-center justify-between mb-2">
              <h3 class="text-gray-500 text-sm font-medium">商品总数</h3>
              <span class="rounded-full bg-yellow-100 p-2">
                <i class="bi bi-box text-yellow-500"></i>
              </span>
            </div>
            <div class="flex items-baseline">
              <span class="text-2xl font-bold">{{ totalProducts }}</span>
            </div>
            <div class="text-gray-400 text-xs mt-2">
              {{ outOfStockProducts }} 个商品库存不足
            </div>
          </div>
        </div>
        
        <!-- 图表区域 -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
          <!-- 销售趋势图 -->
          <div class="bg-white rounded-lg shadow p-4">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-semibold">销售趋势</h3>
              <div>
                <select v-model="salesPeriod" class="text-sm border-gray-300 rounded-md">
                  <option value="week">本周</option>
                  <option value="month">本月</option>
                  <option value="year">本年</option>
                </select>
              </div>
            </div>
            <div class="h-60">
              <canvas id="salesChart"></canvas>
            </div>
          </div>
          
          <!-- 热门商品 -->
          <div class="bg-white rounded-lg shadow p-4">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-semibold">热门商品</h3>
              <router-link to="/products" class="text-sm text-blue-500 hover:text-blue-700">查看全部</router-link>
            </div>
            <div class="h-60">
              <canvas id="productsChart"></canvas>
            </div>
          </div>
        </div>
        
        <!-- 最新订单 -->
        <div class="bg-white rounded-lg shadow overflow-hidden mb-6">
          <div class="px-4 py-3 border-b border-gray-200">
            <div class="flex items-center justify-between">
              <h3 class="text-lg font-semibold">最新订单</h3>
              <router-link to="/orders" class="text-sm text-blue-500 hover:text-blue-700">查看全部</router-link>
            </div>
          </div>
          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">订单号</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">金额</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">下单时间</th>
                  <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                </tr>
              </thead>
              <tbody class="bg-white divide-y divide-gray-200">
                <tr v-for="order in latestOrders" :key="order.id">
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ order.orderNo }}</td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ order.user }}</td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">¥{{ formatNumber(order.amount) }}</td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <span :class="[
                      'px-2 inline-flex text-xs leading-5 font-semibold rounded-full',
                      order.status === '待付款' ? 'bg-yellow-100 text-yellow-800' :
                      order.status === '待发货' ? 'bg-blue-100 text-blue-800' :
                      order.status === '待收货' ? 'bg-purple-100 text-purple-800' :
                      order.status === '已完成' ? 'bg-green-100 text-green-800' :
                      'bg-red-100 text-red-800'
                    ]">
                      {{ order.status }}
                    </span>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ order.createTime }}</td>
                  <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                    <a href="#" class="text-indigo-600 hover:text-indigo-900">查看</a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </main>
      
      <!-- 底部 -->
      <footer class="bg-white border-t border-gray-200 px-4 py-3">
        <div class="text-center text-sm text-gray-500">
          © 2023 微信商城后台管理系统 版权所有
        </div>
      </footer>
    </div>
  </div>
</template>

<style scoped>
/* 可能需要的额外样式 */
.flex-1 {
  overflow-x: hidden;
}
</style> 